<!-- <script> {{{ -->
<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {Server} from '@/stores/ajax';
import {RouterLink, RouterView} from 'vue-router'
import MyQuill from '@/components/quillComponent.vue'
import QuillRead from '@/components/quillReadComponent.vue'
import {GetUserState} from '@/stores/userState';
import WorldIndex from '@/components/bbs/world/worldIndex.vue'
import WorldPost from '@/components/bbs/world/worldPost.vue'
import postList from '@/components/bbs/postList4.vue'
import {ServerUtils} from '@/serverUtils';

let user = GetUserState()

// let newPosts = $ref<any[]>([])
// let loadedPage = 1
// let loading = false
// let loadAll = ref(false)
// const refresh = async () => {
//     nextTick(() => load(1))
// }
// refresh()
const postCallback = async (page: number, posts_per_page: number) => {
    return ServerUtils.getTopics(['star'], 1, 0, '', page, posts_per_page)
}
// const load = async (page = loadedPage) => {
//     console.log(`Loadding page ${loadedPage}`)
//     if (loading == true) return
//     loading = true
//     await ServerUtils.getTopics(['star'], 1, 0, '', page, 10
//     ).then(posts => {
//         if (posts) {
//             let lastCnt = newPosts.length
//             if (posts.list.length)
//                 loadedPage++
//             newPosts.push(...posts.list)
//             loading = false
//             if (lastCnt == newPosts.length) {
//                 loadAll.value = true
//             }
//         }
//     })
//     console.log(newPosts)
// }
</script>
<!-- }}} -->

<template>

    <div class="fhs">
        <div class="fvs rhs-affix-area">
            <div class="rightside-block-1 card-block">
                <div class="label1">
                    默认分区
                </div>
                <div class="subarea-list fvs">
                    <div class="subarea-name-item"
                        v-for="i in 1">
                        <el-link
                            @click="$router.push({path: `/bbs/forums/subarea/10002`})">
                            主分区
                        </el-link>
                    </div>
                </div>
            </div>

        </div>
        <div class="forum-list-block card-block">
            <div class="label1">
                热门
            </div>

            <postList ref='postListRef' :post-callback="postCallback"
                :show-subarea='true' />
        </div>
    </div>
</template>

<!-- <style> {{{ --> 
<style scoped lang="scss">
.ql-bubble .ql-editor {
    padding: 0;
}

.forum-list-block {
    padding: 16px 30px 30px;
    margin-right: 4px;
    background-color: white;
    flex-grow: 1;
}

.rhs-affix-area {
    order: 1;
    flex-basis: 200px;
    min-width: 200px;
}

.up-to-top {
    position: static;
    margin-top: 8px;

    .up-box {
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
        border-radius: 4px;
    }
}

.label1 {
    font-size: 24px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 8px;
}


.rightside-block-1 {
    background-color: white;
    height: 300px;
    padding: 16px;

    .label1 {
        font-size: 24px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .subarea-list {
        margin-bottom: 16px;

        .subarea-name-item {
            /* margin-bottom: 2px; */
        }
    }
}
</style>
<!-- }}} -->

